<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="听音辨译" bgColor="transparent" :h5Show="false"></Navbar>
		<view v-show="isShow">
			<view>
				<view style="margin-top: 20%;text-align: center;">
					<PlayAudio ref="ad" :path="voiceFilesPath" style="display: inline-block;margin-left: 5px;" size="60px"></PlayAudio>
				</view>
			</view>
			<u-list height="500px" style="margin-top: 10px;" key="activeKey">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="button-magr" @click="verifyChoose(item)">
						<view class="button-wite" :class="item.yz == '1' ? 'success-border' : item.yz == '2' ? 'error-border' : ''">
							<view v-if="item.yz == '1' || item.yz == '2'">
								<u--text style="padding-bottom: 5px;padding-left: 10px;" color="#000" size="20px"
									:text="item.english"></u--text>
								<view style="display: flex;align-items: center;">
									<view class="font-cx">{{item.partOfSpeech}}</view>
									<u--text size="12px" :text="item.chinese"></u--text>
								</view>
							</view>
							<view v-if="item.yz == ''" class="font-cx">{{item.partOfSpeech}}</view>
							<u--text v-if="item.yz == ''" :text="item.chinese"></u--text>
							<u-icon v-if="item.yz == '1'" style="margin-left: auto;padding: 10px;" name="checkmark"
								color="green" size="28"></u-icon>
							<u-icon v-if="item.yz == '2'" style="margin-left: auto;padding: 10px;" name="close"
								color="red" size="28"></u-icon>
						</view>
					</view>
				</u-list-item>
				<view class="button-magr" @click="verifyChoose(null)">
					<view class="button-wite-tran" :class="classNo ? 'error-border' : ''">
						<u--text style="padding-left: 10px;" text="不确定"></u--text>
						<u-icon v-show="classNo" style="margin-left: auto;padding: 10px;" name="close"
							color="red" size="28"></u-icon>
					</view>
				</view>
			</u-list>

		</view>

		<view v-if="isButton" class="button-container">
			<u-button class="button" type="success" shape="circle" @click="loadChoose()">下一个</u-button>
		</view>
		<view v-show="!isShow">
			<u-list height="auto" style="margin-top: 10px;" key="ak" >
				<u-list-item v-for="(item, index) in chooseList" :key="index">
					<view style="display: flex; align-items: center;">
						<b @click="toDetail(item.id)" style="padding-right: 10px;" :class="item.choose ? '' : 'font-red'">{{item.english}}</b>
						<u--text type="info" size="12" :text="item.phoneticSymbol"></u--text>
						<PlayAudio :path="item.voiceFilesPath" size="14px"></PlayAudio>
					</view>
					<view style="display: flex; align-items: center;margin-top: 5px;">
						<view style="color: #9093b3;padding-right: 10px;font-size: 10px;">{{item.partOfSpeech}}</view>
						<u--text blod size="14" :text="item.chinese"></u--text>
					</view>
					<!-- 添加虚线 -->
					<u-line style="padding-top: 10px;padding-bottom: 10px;" color="#3f3f3f" dashed></u-line>
				</u-list-item>
				<view class="button-container">
					<u-button class="button" type="success" shape="circle" @click="nextGroup()">{{endSize ? '完成' : '下一组'}}</u-button>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import * as IndexApi from '@/api/index'
	import Navbar from '@/components/navbar/Navbar'
	import PlayAudio from '../../index/playAudio'

	export default {
		components: {
			Navbar,
			PlayAudio,
		},
		data() {
			return {
				id: null,
				isShow: true,
				params: {
					pageNum: 0,
					pageSize: 10
				},
				allList: [],
				newList: [],
				chooseList: [],
				index: -1,
				//选择项
				list: [],
				isCl: false,
				isButton: false,
				randomIndex : 0,
				classNo: false,
				endSize : false,
				voiceFilesPath: null,
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			//测试列表
			loadData() {
				this.params.pageNum += 1;
				IndexApi.learningMaterialsTest(this.params).then(res => {
					console.log("=========", res.rows);
					this.endSize = this.params.pageSize * this.params.pageNum >= res.total;
					this.newList = res.rows;
					//加载选择项
					this.loadChoose()
				})
			},
			//加载选择项
			loadChoose() {
				this.isCl = false;
				this.isButton = false;
				this.classNo = false;
				//判断一组是否完成
				if(this.newList.length == this.chooseList.length){
					this.isShow = false;
					return;
				}
				let item = this.newList[++this.index];
				this.voiceFilesPath = item.voiceFilesPath;
				let list = item.optionsList;
				// 随机生成一个索引
				this.randomIndex = Math.floor(Math.random() * (list.length + 1));
				// 将 item 插入到随机位置
				list.splice(this.randomIndex, 0, item);
				this.list = list.map(item => {return {...item, yz: ''}})
				this.$nextTick(() => {
				  this.$refs.ad.playAudio();
				});
			},
			//验证是否正确
			verifyChoose(item) {
				if(this.isCl){
					return;
				}
				let english = item == null ? "" : item.english;
				var word = this.newList[this.index];
				console.log(word.english, '------------',english, '------------');
				
				if (english == word.english) {
					word.choose = true;
					item.yz = "1";
					//延迟加载下一题
					setTimeout(() => {
						this.loadChoose();
					}, 500)
				} else {
					word.choose = false;
					if(item == null){
						this.classNo = true;
					}else{
						item.yz = "2";
					}
					this.list[this.randomIndex].yz = "1";
					this.isButton = true;
				}
				word.optionsList = null;
				this.chooseList.push(word)
				this.isCl = true;
			},
			nextGroup(){
				this.allList = this.allList.concat(this.chooseList);
				this.chooseList = [];
				this.index = -1;
				this.isShow = true;
				//判断是否把所有的测试单词完成。
				if(this.endSize){
					uni.navigateTo({
						url: '/pages/work/word_test/summarize?data=' + encodeURIComponent(JSON.stringify(this.allList))
					})
					return;
				}
				this.loadData();
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.button-wite {
		display: flex;
		align-items: center;
		width: 90%;
		height: 60px;
		background-color: #f0f0f0;
		border-radius: 8px;
	}
	.button-wite-tran {
		display: flex;
		align-items: center;
		width: 90%;
		height: 60px;
		background-color:transparent;
		border-radius: 8px;
		border: 1px solid #ccc;
	}
	
	.button-container {
		position: fixed;
		width: 100%;
		bottom: 50px;
		/* 距离屏幕底部的距离 */
		left: 50%;
		/* 按钮居中 */
		transform: translateX(-50%);
		/* 按钮居中 */
	}

	.button-magr {
		margin-top: 8%;
		display: flex;
		justify-content: center;
	}

	.font-cx {
		color: #9093b3;
		padding-right: 10px;
		font-size: 10px;
		padding-left: 10px;
	}

	.error-border {
		border: 1px solid red;
	}

	.success-border {
		border: 1px solid green;
	}

	.button {
		font-size: 16px;
		width: 90%;
		background: linear-gradient(145deg, #80c0be, #4c9480);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	.font-red{
		color: #ff5500;
	}
</style>